<template>
  <div id="user">
    <div class="top">
      <div class="top_setting_item">
        <div>
          <div class="setting"></div>
          <div class="message"></div>
        </div>
      </div>
      <div class="user-icon">
        <div class="user-head" @click="goLogin">
          <img src="../../images/nav_4.png" alt />
        </div>
        <div class="user-name">{{name}}</div>
      </div>
      <div class="user-handle">
        <ul>
          <li>
            <p class="count">0</p>
            <p class="title">我的积分</p>
          </li>
          <li>
            <p class="count">12</p>
            <p class="title">为你推荐</p>
          </li>
          <li>
            <p class="count">0</p>
            <p class="title">浏览记录</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="body-handle">
      <van-cell-group>
        <van-cell title="我的订单" value is-link class="order" icon="../../images/order-icon.png" />
      </van-cell-group>
      <div class="handle-item">
        <div class="inner">
          <div class="receive-goods_handle">
            <img src="../../images/car-icon.png" alt />
            <span>待收货</span>
          </div>
          <div class="pay-handle">
            <img src="../../images/dfk-icon.png" alt />
            <span>待付款</span>
          </div>
          <div class="send-goods_handle">
            <img src="../../images/dff-icon.png" alt />
            <span>待发货</span>
          </div>
          <div class="return-goods-handle">
            <img src="../../images/money-icon.png" alt />
            <span>退货单</span>
          </div>
        </div>
      </div>
      <div class="jh-order">
        <div class="inner">
          <img src="../../images/jhdd-icon.png" alt />
          <span>叫货订单</span>
        </div>
      </div>
    </div>
    <div class="body-handle-user">
      <div class="my-collection">
        <img src="../../images/mdsc-icon.png" alt style="width:0.43rem;height:0.37rem" />
        <span>我的收藏</span>
        <div class="icon-flag">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="pre-offer">
        <img src="../../images/yhj-icon.png" alt style="width:0.43rem;height:0.34rem" />
        <span>优惠劵</span>
        <div class="icon-flag">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="my-address">
        <img src="../../images/shdj-icon.png" alt style="width:0.34rem;height:0.49rem" />
        <span>收货地址</span>
        <div class="icon-flag">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="my-overcome">
        <img src="../../images/kfzx-icon.png" alt style="width:0.37rem;height:0.43rem" />
        <span>客服中心</span>
        <div class="icon-flag">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        //保存用户名
        name:""
    };
  },
  methods: {
    goLogin(){
        if(this.name=="您还没登录呢？点我登录"){
            this.$router.push("/login");
        }else{
            console.log("123");
        }
    },
    //获取用户信息
    getUserInfo(){
        let users = JSON.parse(localStorage.getItem("users") || '[]');
       if(typeof(users.username) == "undefined"){
           this.name="您还没登录呢？点我登录"
       }else{
           this.name = users.username;
       }
    }
  },
  created(){
      this.getUserInfo();
  }
};
</script>
<style lang="less" scoped>
#user {
  margin-bottom: 1.2rem;
  .top {
    width: 100%;
    background-color: #e83632;
    padding-top: 0.65rem;
    .top_setting_item {
      padding: 0 0.3rem;
      height: 0.5rem;
      div {
        width: 100%;
        height: 0.5rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .setting {
          width: 0.5rem;
          height: 0.5rem;
          background: url("../../images/setting.png") no-repeat center center;
          background-size: 0.49rem 0.49rem;
        }
        .message {
          width: 0.5rem;
          height: 0.5rem;
          background: url("../../images/message2.png") no-repeat center center;
          background-size: 0.5rem 0.5rem;
        }
      }
    }
    .user-icon {
      width: 100%;
      margin-top: 0.2rem;
      .user-head {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
        background-color: #eee;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .user-name {
        text-align: center;
        margin: 0.1rem 0;
        color: #f0f0f0;
        font-size: 0.24rem;
      }
    }
    .user-handle {
      ul {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        li {
          width: 33%;
          height: 1rem;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          p {
            font-size: 0.24rem;
            color: #f0f0f0;
            margin-bottom: 0;
          }
        }
      }
    }
  }
  .body-handle {
    margin-top: 0.2rem;
    .van-cell__left-icon {
      margin-right: 0.25rem;
    }
    .van-icon__image {
      width: 0.4rem;
      height: 0.4rem;
    }
    .van-cell {
      padding: 0.1rem 0.16rem;
      padding-left: 0.3rem;
      font-size: 0.24rem;
      line-height: 0.44rem;
    }
    .handle-item {
      background-color: #fff;
      height: 1.5rem;
      width: 100%;
      .inner {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        border-bottom: 0.01rem solid #ccc;
      }
      div {
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        span {
          margin-top: 0.1rem;
          color: #656565;
          font-size: 0.24rem;
        }
      }
      .receive-goods_handle {
        img {
          width: 0.52rem;
          height: 0.47rem;
        }
      }
      .pay-handle {
        img {
          width: 0.54rem;
          height: 0.44rem;
        }
      }
      .send-goods_handle {
        img {
          width: 0.56rem;
          height: 0.5rem;
        }
      }
      .return-goods-handle {
        img {
          width: 0.6rem;
          height: 0.58rem;
        }
      }
    }

    .jh-order {
      height: 1rem;
      width: 100%;
      background-color: #fff;
      .inner {
        width: 100%;
        height: 100%;
        margin-left: 0.3rem;
        display: flex;
        align-items: center;
        img {
          width: 0.36rem;
          height: 0.43rem;
        }
        span {
          margin-left: 0.25rem;
          font-size: 0.32rem;
          color: #656565;
        }
      }
    }
  }
  .body-handle-user {
    width: 100%;
    background-color: #fff;
    margin-top: 0.2rem;
    display: flex;
    flex-direction: column;
    > div {
      margin: 0 0.3rem;
      width: 100%;
      height: 1rem;
      display: flex;
      align-items: center;
      border-bottom: 0.01rem solid #ccc;
      position: relative;
      span {
        font-size: 0.32rem;
        color: #656565;
        margin-left: 0.25rem;
      }
      .icon-flag {
        position: absolute;
        right: 0.5rem;
        color: #ccc;
      }
    }
  }
}
</style>